.resize-line, .resize-dot {
    position: absolute;
}
.line-middle-dot,
.resize-dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px #4DAEFF solid;
}
.line-xt, .line-xb {
    width: 100%;
    height: 5px;
    cursor: ns-resize;
}
.line-yl, .line-yr {
    width: 5px;
    height: 100%;
    cursor: ew-resize;
}
.line-xt {
    top: 0;
    border-top: 1px #4DAEFF solid;
}
.line-xb {
    bottom: 0;
    border-bottom: 1px #4DAEFF solid;
}
.line-yl {
    left: 0;
    border-left: 1px #4DAEFF solid;
}
.line-yr {
    right: 0;
    border-right: 1px #4DAEFF solid;
}

.line-middle-dot {
    position: absolute;
}

.line-xb .line-middle-dot,
.line-xt .line-middle-dot {
    left: 50%;
    margin-left: -4px;
}

.line-yl .line-middle-dot,
.line-yr .line-middle-dot {
    top: 50%;
    margin-top: -4px;
}

.line-xt .line-middle-dot {
    top: -5px;
}
.line-xb .line-middle-dot{
    bottom: -5px;
}
.line-yl .line-middle-dot {
    left: -5px;
}
.line-yr .line-middle-dot{
    right: -5px;
}

.dot-lt {
    left: -4px;
    top: -4px;
    cursor: nwse-resize;
}
.dot-rt {
    right: -4px;
    top: -4px;
    cursor: nesw-resize;
}
.dot-lb {
    left: -4px;
    bottom: -4px;
    cursor: nesw-resize;
}
.dot-rb {
    right: -4px;
    bottom: -4px;
    cursor: nwse-resize;
}